<template>
  <view class="specs-selector" v-if="show">
    <view class="mask" @click="handleClose"></view>
    <view class="selector-content">
      <!-- 关闭按钮 -->
      <view class="close-btn" @click="handleClose">
        <text class="close-icon">×</text>
      </view>
      
      <!-- 商品信息 -->
      <view class="product-info">
        <image class="product-image" :src="product.imgUrl" mode="aspectFill"></image>
        <view class="product-details">
          <view class="product-name">{{ product.name }}</view>
          <view class="product-desc">{{ product.description }}</view>
          <view class="product-price">¥{{ product.price }}</view>
          <view class="product-size">杯型:{{ product.size }}</view>
        </view>
      </view>
      
      <!-- 温度选择 -->
      <view class="specs-section">
        <view class="section-title">温度</view>
        <view class="options-list">
          <view 
            v-for="(temp, index) in tempOptions" 
            :key="'temp-'+index"
            :class="['option-item', selectedTemp === temp ? 'active' : '']"
            @click="selectedTemp = temp"
          >
            <text>{{ temp }}</text>
          </view>
        </view>
      </view>
      
      <!-- 糖度选择 -->
      <view class="specs-section">
        <view class="section-title">甜度</view>
        <view class="options-list">
          <view 
            v-for="(sugar, index) in sugarOptions" 
            :key="'sugar-'+index"
            :class="['option-item', selectedSugar === sugar ? 'active' : '']"
            @click="selectedSugar = sugar"
          >
            <text>{{ sugar }}</text>
          </view>
        </view>
      </view>
      
      <!-- 数量选择 -->
      <view class="quantity-section">
        <view class="section-title">数量</view>
        <view class="quantity-selector">
          <view class="quantity-btn minus" @click="decreaseQuantity">-</view>
          <view class="quantity-value">{{ quantity }}</view>
          <view class="quantity-btn plus" @click="increaseQuantity">+</view>
        </view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="bottom-actions">
        <view class="selected-info">
          <text>{{ selectedTemp }}，{{ selectedSugar }}</text>
        </view>
        <view class="action-buttons">
          <view class="action-btn buy-now" @click="buyNow">立即购买</view>
          <view class="action-btn add-to-cart" @click="addToCart">加入购物车</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  product: {
    type: Object,
    default: () => ({
      id: '',
      name: '',
      description: '',
      price: 0,
      imgUrl: '',
      size: '600ml'
    })
  }
});

const emits = defineEmits(['close', 'add-to-cart', 'buy-now']);

// 温度选项
const tempOptions = ref(['正常冰', '少冰', '去冰', '常温', '热']);
const selectedTemp = ref('正常冰');

// 糖度选项
const sugarOptions = ref(['无糖（已难喝）', '3分糖', '5分糖', '7分糖（标准甜）']);
const selectedSugar = ref('7分糖（标准甜）');

// 数量
const quantity = ref(1);

// 数量增减方法
const increaseQuantity = () => {
  if (quantity.value < 99) {
    quantity.value++;
  }
};

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

// 关闭弹窗
const handleClose = () => {
  emits('close');
};

// 加入购物车
const addToCart = () => {
  const selectedProduct = {
    ...props.product,
    selectedTemp: selectedTemp.value,
    selectedSugar: selectedSugar.value,
    quantity: quantity.value
  };
  
  emits('add-to-cart', selectedProduct);
  handleClose();
};

// 立即购买
const buyNow = () => {
  const selectedProduct = {
    ...props.product,
    selectedTemp: selectedTemp.value,
    selectedSugar: selectedSugar.value,
    quantity: quantity.value
  };
  
  emits('buy-now', selectedProduct);
  handleClose();
};

// 重置数据
watch(() => props.show, (newVal) => {
  if (newVal) {
    // 打开弹窗时重置为默认值
    selectedTemp.value = '正常冰';
    selectedSugar.value = '7分糖（标准甜）';
    quantity.value = 1;
  }
});
</script>

<style lang="scss" scoped>
.specs-selector {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .selector-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 30rpx;
    box-sizing: border-box;
    
    .close-btn {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      
      .close-icon {
        font-size: 48rpx;
        color: #999;
      }
    }
    
    .product-info {
      display: flex;
      margin-bottom: 30rpx;
      
      .product-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }
      
      .product-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .product-name {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .product-desc {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 12rpx;
          line-height: 1.3;
        }
        
        .product-price {
          font-size: 40rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 8rpx;
        }
        
        .product-size {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .specs-section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
        font-weight: 500;
      }
      
      .options-list {
        display: flex;
        flex-wrap: wrap;
        
        .option-item {
          height: 60rpx;
          padding: 0 30rpx;
          border-radius: 30rpx;
          background-color: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 20rpx 20rpx 0;
          
          text {
            font-size: 26rpx;
            color: #666;
          }
          
          &.active {
            background-color: #8cc152;
            
            text {
              color: #fff;
            }
          }
        }
      }
    }
    
    .quantity-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;
      
      .section-title {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      
      .quantity-selector {
        display: flex;
        align-items: center;
        
        .quantity-btn {
          width: 60rpx;
          height: 60rpx;
          background-color: #f5f5f5;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
        }
        
        .quantity-value {
          width: 80rpx;
          text-align: center;
          font-size: 32rpx;
          color: #333;
        }
      }
    }
    
    .bottom-actions {
      border-top: 2rpx solid #f5f5f5;
      padding-top: 30rpx;
      
      .selected-info {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
      }
      
      .action-buttons {
        display: flex;
        justify-content: space-between;
        
        .action-btn {
          height: 80rpx;
          border-radius: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 500;
          
          &.buy-now {
            width: 45%;
            background-color: #fff;
            color: #8cc152;
            border: 2rpx solid #8cc152;
          }
          
          &.add-to-cart {
            width: 45%;
            background-color: #8cc152;
            color: #fff;
          }
        }
      }
    }
  }
}
</style> 